<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			
			#friendinfo {
				display: none;
			}
			
			th,
			td {
				width: 80px;
				height: 30px;
				border: 1px solid gainsboro;
			}
			
			.tishi {
				width: 300px;
				height: 150px;
				position: absolute;
				top: 300px;
				left: 400px;
				border: 1px solid;
				background-color: darkgrey;
			}
			
			#chatmain {
				width: 810px;
				height: 600px;
				margin: 0px auto;
			}
			
			#left {
				width: 300px;
				height: 600px;
				border: 1px solid gainsboro;
				float: left;
			}
			
			#right {
				width: 500px;
				height: 600px;
				border: 1px solid gainsboro;
				float: left;
				margin-left: -1px;
			}
			
			#right .top {
				width: 500px;
				height: 60px;
				line-height: 60px;
				border-bottom: 1px solid gainsboro;
				text-align: center;
			}
			
			#right .screen {
				width: 500px;
				height: 400px;
			}
			
			#right .input {
				width: 480px;
				height: 100px;
				margin-left: 10px;
				border-top: 1px solid gainsboro;
			}
			
			#right .button {
				width: 60px;
				height: 25px;
				float: right;
				line-height: 25px;
				margin-right: 40px;
				margin-top: 7px;
			}
			
			.friend {
				width: 280px;
				margin-left: 10px;
				border: 1px solid gainsboro;
				text-align: center;
				height: 30px;
				line-height: 30px;
				margin-bottom: 10px;
			}
			
			.chat_right .content {
				float: right;
				margin-right: 30px;
				border: 1px solid gainsboro;
				border-radius: 4px;
				max-width: 250px;
				line-height: 20px;
				text-align: center;
				margin-top: 10px;
				word-break: break-word;
				padding: 8px;
			}
			
			.chat_left .content {
				float: left;
				margin-left: 30px;
				border: 1px solid gainsboro;
				border-radius: 4px;
				max-width: 250px;
				line-height: 20px;
				text-align: center;
				margin-top: 10px;
				word-break: break-word;
				padding: 8px;
			}
			
			.clear {
				clear: both;
			}
			
			.newinfo {
				width: 50px;
				height: 30px;
				line-height: 30px;
				float: right;
				margin-right: 10px;
				font-size: 12px;
			}
		</style>
	</head>

	<body>
		<div>
			<div id="info"></div>
			<div>
				<p>查找好友：<input type="text" id="search" value="" />
					<input type="button" value="查找" onclick="getFridendInfo()" />
					<table id="friendinfo">
						<thead>
							<tr>
								<th>用户名</th>
								<th>昵称</th>
								<th>性别</th>
								<th>地区</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>

						</tbody>
					</table>
				</p>
				<p><input type="button" value="退出登录" onclick="loginOut()" /></p>
			</div>
			<div id="chatmain">
				<div id="left">
					<div>好友列表</div>
					<div id="friendlist"></div>
				</div>
				<div id="right"></div>
			</div>
			<script src="js/jmessage-sdk-web-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">
				var itemname;
				var itempassword;
				var page = "" //用来判断当前和哪个好友聊天
				var x //判断当前页面的id
				var t = new Date().getTime(); //获取时间戳
				var signature = hex_md5("appkey=ed4e578288af30af5ff75d73&timestamp=" + t + "&random_str=022cd9fd995849b58b3ef0e943421ed9&key=964655ee084a3a9b2baf077a")
				window.JIM = new JMessage({
					//					debug: true,
				});
				window.onload = function() {
					if(location.search == "") {
						location.href = "index.html"
					} else {
						init();
					}
				}
				//初始化
				function init() {
					JIM.init({
						"appkey": "ed4e578288af30af5ff75d73",
						"random_str": "022cd9fd995849b58b3ef0e943421ed9",
						"signature": signature,
						"timestamp": t,
					}).onSuccess(function(data) {
						//do something
						console.log("初始化成功")
						itemname = getUrlItem("username")
						itempassword = getUrlItem("password")
						login()
					}).onFail(function(data) {
						// do something
						console.log("初始化失败")
					});
				}

				//退出登录
				function loginOut() {
					JIM.loginOut();
					location.href="index.html"
				}

				//登录之后显示自己的信息
				function getUserInfo(username) {
					JIM.getUserInfo({
						'username': username
					}).onSuccess(function(data) {
						console.log("查询成功")
						document.getElementById("info").innerHTML = "欢迎：" + data.user_info.username
					}).onFail(function(data) {
						console.log('error:' + JSON.stringify(data));
					});
				}

				//得到传递过来的用户名
				function getUrlItem(name) {
					var url = location.search
					start = url.indexOf(name + "=")
					if(start != -1) {
						start = start + name.length + 1;
						end = url.indexOf("&", start);
						if(end == -1) {
							end = url.length
						}
						return url.substring(start, end)
					}
					return '';
				}

				function login() {
					JIM.login({
						'username': itemname,
						'password': itempassword
					}).onSuccess(function(data) {
						console.log("登录成功")
						getFriendList()
						getUserInfo(itemname)
						JIM.onMsgReceive(function(data) {
							console.log(data.messages[0].content.from_name)
							if(data.messages[0].content.from_id == page) {
								var clear = document.createElement("div")
								var content2 = document.getElementById("chat" + x).children[1]
								clear.className = "clear"
								var content = document.createElement("div")
								content.innerHTML = data.messages[0].content.msg_body.text
								content.className = "content"
								var div = document.createElement("div")
								div.className = "chat_left"
								div.appendChild(clear)
								div.appendChild(content)
								content2.appendChild(div)
							} else {
								var divs = document.getElementById("friendlist").getElementsByTagName("div")
								for(var i = 0; i < divs.length; i++) {
									if(divs[i].innerHTML == data.messages[0].content.from_id && divs[i].children.length == 0) {
										var span = document.createElement("span")
										span.innerHTML = "新消息"
										span.className = "newinfo"
										divs[i].appendChild(span)
									}

									if(divs[i].innerHTML == data.messages[0].content.from_id && divs[i].children.length != 0) {

									}
									var clear = document.createElement("div")
									var content2 = document.getElementById("chat" + i).children[1]
									clear.className = "clear"
									var content = document.createElement("div")
									content.innerHTML = data.messages[0].content.msg_body.text
									content.className = "content"
									var div = document.createElement("div")
									div.className = "chat_left"
									div.appendChild(clear)
									div.appendChild(content)
									content2.appendChild(div)

								}
							}
						});
						JIM.onEventNotification(function(data) {
							console.log(data)
							//判断该时间是不是好友请求事件
							if(data.event_type == 5) {
								console.log("进入")
								//继续判断是添加好友还是回复好友
								if(data.extra == 1) { //收到的是别人的好友请求
									var div = document.createElement("div")
									div.className = "tishi"
									var p1 = document.createElement("p")
									var p2 = document.createElement("p")
									p1.innerHTML = data.from_username + ":" + data.description
									p2.innerHTML = "<input type='button' id='agree' value='添加'/>" + "<input type='button' id='refuse' value='取消'/>";
									div.appendChild(p1)
									div.appendChild(p2)
									document.body.appendChild(div)
									var agree = document.getElementById("agree")
									var refuse = document.getElementById("refuse")
									agree.onclick = function() {
										var name = data.from_username
										agreeFriend(name)
										document.body.removeChild(div)

									}
									refuse.onclick = function() {
										document.body.removeChild(div)
									}
								}
								if(data.extra == 2) { //收到的是别人对你好友请求的回复
									var div = document.createElement("div")
									div.className = "tishi"
									var p1 = document.createElement("p")
									var p2 = document.createElement("p")
									p1.innerHTML = data.from_username + "同意了你的好友请求"
									p2.innerHTML = "<input type='button' value='关闭' id='close'/>"
									div.appendChild(p1)
									div.appendChild(p2)
									document.body.appendChild(div)
									var close = document.getElementById("close")
									close.onclick = function() {
										document.body.removeChild(div)
										getFriendList() //如果別人同意了你的好友請求， 关闭通知自己列表多加一个人
									}
								}
							}

						});
					}).onFail(function(data) {
						console.log('error:' + JSON.stringify(data));
					}).onTimeout(function(data) {
						console.log('timeout:' + JSON.stringify(data));
					});
				}
				//查询好友信息
				function getFridendInfo() {
					var tab = document.getElementById("friendinfo");
					var tbody = document.getElementById("friendinfo").children[1];
					tbody.innerHTML = "";
					var searchname = document.getElementById("search").value;
					JIM.getUserInfo({
						'username': searchname
					}).onSuccess(function(data) {
						console.log(data)
						tab.style.display = "block"
						var tr = document.createElement("tr");
						var td1 = document.createElement("td");
						var td2 = document.createElement("td");
						var td3 = document.createElement("td");
						var td4 = document.createElement("td");
						var td5 = document.createElement("td");
						td1.innerHTML = data.user_info.username;
						td2.innerHTML = (data.user_info.nickname) ? data.user_info.nickname : "";
						td3.innerHTML = (data.user_info.gender) ? data.user_info.gender : "";
						td4.innerHTML = (data.user_info.region) ? data.user_info.region : "";
						td5.innerHTML = "<input type='button' id='add' value='添加'/>" + "<input type='button' id='cancel' value='取消'/>";
						tr.appendChild(td1);
						tr.appendChild(td2);
						tr.appendChild(td3);
						tr.appendChild(td4);
						tr.appendChild(td5);
						tbody.appendChild(tr);
						var add = document.getElementById("add")
						var cancel = document.getElementById("cancel")
						add.onclick = function() {
							var name = tbody.children[0].children[0].innerHTML
							addFriend(name)
							tbody.removeChild(tr)
						}
						cancel.onclick = function() {
							tbody.removeChild(tr)
						}

					}).onFail(function(data) {
						console.log('error:' + JSON.stringify(data));
					});
				}

				function updateUserInfo() {
					JIM.updateSelfInfo({
						'nick_name': 'zy',
					}).onSuccess(function(data) {
						console.log("修改成功")
					}).onFail(function(data) {});
				}

				function addFriend(friendname) {
					if(friendname == itemname) {
						alert("不能添加自己")
					} else {
						JIM.addFriend({
							'target_name': friendname,
							'from_type': '1',
							'why': '你好，加个好友好吗?',
						}).onSuccess(function(data) {
							// do something
							console.log("发送请求成功")
							console.log('success:' + JSON.stringify(data));
						}).onFail(function(data) {
							// do something
							console.log("失败")
							console.log('error:' + JSON.stringify(data));
						});
					}

				}

				function getFriendList() {
					JIM.getFriendList().onSuccess(function(data) {
						loadFriendlist(data)
					}).onFail(function(data) {
						console.log('error:' + JSON.stringify(data));
					});

				}

				function agreeFriend(friendname) {
					JIM.addFriend({
						'target_name': friendname,
						'from_type': '2',
						'why': '',

					}).onSuccess(function(data) {
						// do something
						console.log(data)
						console.log("添加成功")
						getFriendList() //如果自己同意了别人的好友请求，自己的好友列表了多加一个人
					}).onFail(function(data) {
						// do something
						console.log("添加失败")
					});
				}

				function loadFriendlist(t) {
					var right = document.getElementById("right")
					var friendlist = document.getElementById("friendlist")
					friendlist.innerHTML = ""
					right.innerHTML = ""
					for(var i = 0; i < t.friend_list.length; i++) {
						var div1 = document.createElement("div")
						div1.innerHTML = t.friend_list[i].username
						div1.className = "friend"
						friendlist.appendChild(div1)

						//创建聊天

						var right = document.getElementById("right");
						var chat = document.createElement("div");
						chat.id = "chat" + i
						chat.style.display = "none"
						var top = document.createElement("div"); //聊天列表的头部
						top.innerHTML = t.friend_list[i].username;
						top.className = "top"
						var screen = document.createElement("div"); //聊天显示窗口
						screen.className = "screen"
						var input = document.createElement("div");
						input.contentEditable = "true";
						input.className = "input"
						var p = document.createElement("p");
						p.innerHTML = "<input class='button' type='button'value='发送' onclick='sendSingleMsg(this)'/>";
						chat.appendChild(top);
						chat.appendChild(screen);
						chat.appendChild(input);
						chat.appendChild(p);
						right.appendChild(chat);
					}
					var divs = friendlist.getElementsByTagName("div")
					for(var i = 0; i < divs.length; i++) {
						(function(index) {
							divs[index].onclick = function() {
								if(divs[index].children.length != 0) {
									divs[index].removeChild(divs[index].children[0])
								} else {

								}
								for(var i = 0; i < right.children.length; i++) {
									right.children[i].style.display = "none"
								}
								right.children[index].style.display = "block"
								page = divs[index].innerHTML
								x = index
							}
						})(i)
					}
				}

				function sendSingleMsg(t) {
					var clear = document.createElement("div")
					clear.className = "clear"
					var screen = t.parentNode.parentNode.children[1]
					var div = document.createElement("div")
					div.className = "chat_right"
					var content = document.createElement("div")
					content.innerHTML = t.parentNode.parentNode.children[2].innerHTML
					content.className = "content"
					div.appendChild(clear)
					div.appendChild(content)

					screen.appendChild(div)
					console.log(t.parentNode.parentNode.children[0].innerHTML)
					JIM.sendSingleMsg({
						'target_username': t.parentNode.parentNode.children[0].innerHTML,
						'content': t.parentNode.parentNode.children[2].innerHTML,
					}).onSuccess(function(data, msg) {
						// do something
						console.log("发送成功")
					}).onFail(function(data) {
						// do something
						console.log("发送失败")
					});
					t.parentNode.parentNode.children[2].innerHTML = ""
				}
			</script>
		</div>
	</body>

</html>